import { useState, useEffect } from 'react'
import http from '../../api/index'
// import { Tabs } from 'antd';
import styles from './index.module.css'
import SearchResults from './components/SearchResults'
import { DrugData, useDrugCategories } from '../../hooks/useDrugCategories';
import Nabar from '../../conpoment/Nabar'
import { SearchBar } from 'antd-mobile'

function Index() {
  const [searchKeyword, setSearchKeyword] = useState('')
  const [recentSearches, setRecentSearches] = useState<string[]>([])
  const [hotSearches] = useState<string[]>([
    '感冒', '发烧', '咳嗽', '头痛', '胃痛', '失眠', '高血压', '糖尿病'
  ])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [hasSearched, setHasSearched] = useState(false)
  const [list, setList] = useState<any[]>([])
  const [activeTab, setActiveTab] = useState('1')
  const [searchSuggestions, setSearchSuggestions] = useState<string[]>([])
  const [showSuggestions, setShowSuggestions] = useState(false)

  // 分别存储不同类型的数据
  const [bookData, setBookData] = useState<any[]>([]) // 科普文章数据
  const [doctorData, setDoctorData] = useState<any[]>([]) // 医生数据
  const [socoData, setSocoData] = useState<any[]>([]) // 医院数据
  const [drugData, setDrugData] = useState<DrugData[]>([]) // 药品数据

  // 使用药品分类hook
  const {
    loading: drugLoading,
    error: drugError,
    getFilteredDrugs,
    changeTab: changeDrugTab
  } = useDrugCategories()

  // 获取搜索建议
  const getSearchSuggestions = async (keyword: string) => {
    if (!keyword.trim()) {
      setSearchSuggestions([])
      setShowSuggestions(false)
      return
    }

    try {
      // 模拟搜索建议API
      const suggestions = [
        `${keyword}症状`,
        `${keyword}治疗`,
        `${keyword}医生`,
        `${keyword}医院`,
        `${keyword}药品`
      ].filter(item => item.toLowerCase().includes(keyword.toLowerCase()))

      setSearchSuggestions(suggestions.slice(0, 5))
      setShowSuggestions(true)
    } catch (err) {
      console.error('获取搜索建议失败:', err)
    }
  }

  // 根据分类搜索
  const getDataByCategory = async (keyword: string, category: string) => {
    if (!keyword.trim()) return

    setLoading(true)
    setError(null)

    try {
      const res = await http.get('/api/search', {
        params: {
          keyword: keyword.trim(),
          category: category,
          pageCode: '1',
          pageSize: '10'
        }
      })
      console.log(`${category}搜索结果:`, res.data)

      // 根据API返回的数据结构分别处理不同类型的数据
      if (res.data && res.data.data) {
        // 处理book数据（科普文章）
        if (res.data.data.book && Array.isArray(res.data.data.book)) {
          setBookData(res.data.data.book)
          console.log('科普文章数据:', res.data.data.book)
        }

        // 处理doctor数据（医生）
        if (res.data.data.doctor && Array.isArray(res.data.data.doctor)) {
          setDoctorData(res.data.data.doctor)
          console.log('医生数据:', res.data.data.doctor)
        }

        // 处理soco数据（医院）
        if (res.data.data.soco && Array.isArray(res.data.data.soco)) {
          setSocoData(res.data.data.soco)
          console.log('医院数据:', res.data.data.soco)
        }

        // 处理药品数据
        if (res.data.data.medicine && Array.isArray(res.data.data.medicine)) {
          setDrugData(res.data.data.medicine)
          console.log('药品数据:', res.data.data.medicine)
        }

        // 根据当前选中的tab设置对应的数据到list中
        const categoryMap: { [key: string]: string } = {
          '1': 'comprehensive',
          '2': 'book',
          '3': 'doctor',
          '4': 'soco',
          '5': 'medicine'
        }

        const currentCategory = categoryMap[activeTab] || 'comprehensive'
        let currentData = []

        switch (currentCategory) {
          case 'book':
            currentData = res.data.data.book || []
            break
          case 'doctor':
            currentData = res.data.data.doctor || []
            break
          case 'soco':
            currentData = res.data.data.soco || []
            break
          case 'medicine':
            currentData = res.data.data.medicine || []
            break
          case 'comprehensive':
            // 综合搜索显示所有数据
            currentData = [
              ...(res.data.data.book || []),
              ...(res.data.data.doctor || []),
              ...(res.data.data.soco || []),
              ...(res.data.data.medicine || [])
            ]
            break
          default:
            currentData = []
        }

        setList(currentData)

        console.log('当前tab数据:', currentData)
        console.log('数据长度:', currentData.length)
        console.log('activeTab:', activeTab)
        console.log('currentCategory:', currentCategory)
        console.log('res.data.data.book:', res.data.data.book)
        console.log('res.data.data.doctor:', res.data.data.doctor)
        console.log('res.data.data.soco:', res.data.data.soco)
      }
    } catch (err) {
      console.error('搜索错误:', err)
      setError('搜索失败，请稍后重试')
      setList([])
      setBookData([])
      setDoctorData([])
      setSocoData([])
      setDrugData([])
    } finally {
      setLoading(false)
    }
  }


  // 清除最近搜索
  const clearRecentSearches = () => {
    setRecentSearches([])
    localStorage.removeItem('recentSearches')
  }

  // 点击最近搜索项
  const handleRecentSearchClick = (keyword: string) => {
    setSearchKeyword(keyword)
    setHasSearched(true)
    setShowSuggestions(false)

    // 根据当前选中的tab执行搜索
    const categoryMap: { [key: string]: string } = {
      '1': 'comprehensive',
      '2': 'article',
      '3': 'doctor',
      '4': 'hospital',
      '5': 'medicine'
    }

    getDataByCategory(keyword, categoryMap[activeTab] || 'comprehensive')
  }

  // 点击热门搜索
  /**
   * 处理热门搜索关键词点击事件
   * @param {string} keyword - 被点击的热门搜索关键词
   */
  const handleHotSearchClick = (keyword: string) => {
    // 设置搜索关键词并标记已搜索状态
    setSearchKeyword(keyword)
    setHasSearched(true)
    // 隐藏搜索建议
    setShowSuggestions(false)

    // 添加到最近搜索
    // 创建新数组，将当前关键词添加到开头，并过滤掉重复项
    const newRecentSearches = [keyword, ...recentSearches.filter(item => item !== keyword)]
    // 更新最近搜索状态，只保留前10条记录
    setRecentSearches(newRecentSearches.slice(0, 10))
    // 将最近搜索记录保存到本地存储
    localStorage.setItem('recentSearches', JSON.stringify(newRecentSearches.slice(0, 10)))

    // 根据当前选中的tab执行搜索
    // 定义tab标识到类别的映射关系
    const categoryMap: { [key: string]: string } = {
      '1': 'comprehensive',  // 综合搜索
      '2': 'article',       // 文章搜索
      '3': 'doctor',        // 医生搜索
      '4': 'hospital',
      '5': 'medicine'       // 药品搜索
    }

    getDataByCategory(keyword, categoryMap[activeTab] || 'comprehensive')
  }

  // 组件挂载时加载最近搜索
  useEffect(() => {
    const saved = localStorage.getItem('recentSearches')
    if (saved) {
      setRecentSearches(JSON.parse(saved))
    }
  }, [])

  // 医生卡片内联已抽离为独立组件，见 components/DoctorCard

  /**
   * 处理标签页切换的函数
   * @param key - 当前选中的标签页的key值
   */
  const onChange = (key: string) => {
    // 设置当前激活的标签页
    setActiveTab(key)
    console.log('切换到tab:', key);

    // 根据tab切换显示对应的数据
    let currentData = []

    // 使用switch语句根据不同的tab key设置对应的数据
    switch (key) {
      case '1': // 综合 - 合并所有数据源
        currentData = [
          ...bookData,
          ...doctorData,
          ...socoData,
          ...drugData
        ]
        break
      case '2': // 科普 - 只显示图书数据
        currentData = bookData
        break
      case '3': // 医生 - 只显示医生数据
        currentData = doctorData
        break
      case '4': // 医院 - 只显示社会机构数据
        currentData = socoData
        break
      case '5': // 药品 - 显示药品数据
        currentData = drugData
        break
      default: // 默认情况设置为空数组
        currentData = []
    }

    // 更新列表
    setList(currentData)

    console.log('切换tab后的数据:', currentData)

    // 如果已经搜索过，切换tab时重新搜索
    if (hasSearched && searchKeyword.trim()) {
      const categoryMap: { [key: string]: string } = {
        '1': 'comprehensive',
        '2': 'book',
        '3': 'doctor',
        '4': 'soco',
        '5': 'medicine'
      }

      getDataByCategory(searchKeyword.trim(), categoryMap[key] || 'comprehensive')
    }
  }
  // Tabs items 已封装至 SearchResults 组件
  return (
    <div className={styles.container}>
      <Nabar title={<SearchBar placeholder='请输入内容' showCancelButton autoFocus value={searchKeyword}
        onChange={(val) => {
          setSearchKeyword(val)
          if (val.trim()) {
            getSearchSuggestions(val)
          } else {
            setShowSuggestions(false)
            setSearchSuggestions([])
          }
        }}
        onFocus={() => searchKeyword.trim() && setShowSuggestions(true)}
        className={styles.searchInput} />} sticky={false} />
      <div>
      {/* 搜索区域 */}
      <div className={styles.searchSection}>
        <div className={styles.searchBar}>
        
        </div>
        {/* 搜索建议 */}
        {showSuggestions && searchSuggestions.length > 0 && (
          <div className={styles.searchSuggestions}>
            <div className={styles.suggestionsHeader}>
              <span className={styles.suggestionsTitle}>搜索建议</span>
            </div>
           
          </div>
        )}

        {/* 热门搜索 - 只在未搜索且输入框为空时显示 */}
        {!hasSearched && !searchKeyword && hotSearches.length > 0 && (
          <div className={styles.hotSearches}>
            <div className={styles.hotHeader}>
              <span className={styles.hotTitle}>🔥 热门搜索</span>
            </div>
            <div className={styles.hotList}>
              {hotSearches.map((item, index) => (
                <div
                  key={index}
                  className={styles.hotItem}
                  onClick={() => handleHotSearchClick(item)}
                >
                  {item}
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Tabs - 只在输入框有值时显示 */}
        {searchKeyword && (
          <div>
            <SearchResults
              activeTab={activeTab}
              list={list}
              loading={loading}
              error={error}
              doctorData={doctorData}
              socoData={socoData}
              drugData={drugData}
              drugLoading={drugLoading}
              drugError={drugError}
              onChange={onChange}
              onDrugTabChange={changeDrugTab}
              getFilteredDrugs={getFilteredDrugs}
            />
          </div>
        )}
        {/* 搜索结果 */}
        {hasSearched && (
          <div className={styles.searchResults}>
            {loading && (
              <div className={styles.loading}>搜索中...</div>
            )}

            {error && (
              <div className={styles.errorMessage}>{error}</div>
            )}
          </div>
        )}
        {/* 最近搜索 - 只在未搜索且输入框为空时显示 */}
        {!hasSearched && !searchKeyword && recentSearches.length > 0 && (
          <div className={styles.recentSearches}>
            <div className={styles.recentHeader}>
              <span className={styles.recentTitle}>最近搜索</span>
              <button className={styles.clearRecentButton} onClick={clearRecentSearches}>🗑️</button>
            </div>
            <div className={styles.recentList}>
              {recentSearches.map((item, index) => (
                <div
                  key={index}
                  className={styles.recentItem}
                  onClick={() => handleRecentSearchClick(item)}
                >
                  {item}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
      </div>
    </div>
  )
}

export default Index
